<template>
    <div class="chat-container">
        <div class="course-selector">
            <div class="selector-left">
                <el-button class="selector-button" @click="showSubjectMenu = true">
                    <span>{{ currentSubject || '科目' }}</span>
                </el-button>
                <el-button class="selector-button" @click="showChapterMenu = true" :disabled="!currentSubject">
                    <span>{{ formatChapterDisplay(currentChapter) }}</span>
                </el-button>
            </div>
            <div class="selector-center">
                {{ currentCourse || '当前课程' }}
            </div>
        </div>
        <!-- 对话内容 -->
        <div class="chat-content" ref="chatContent">
            <div v-for="(message, index) in messages" :key="index"
                :class="['message-item', message.type === 'user' ? 'user-message' : 'ai-message']">
                <div class="message-avatar">
                    <el-avatar :size="36" :src="message.type === 'user' ? userAvatar : aiAvatar" />
                </div>
                <div class="message-content">
                    <div class="message-text">{{ message.content }}</div>
                </div>
            </div>
            <!-- 提示词区域 -->
            <div class="prompts-container" v-if="messages.length <= 1">
                <!-- 热门提示词 -->
                <div class="prompt-section">
                    <div class="section-title">热门提示词</div>
                    <div class="prompt-list">
                        <template v-if="hotPrompts.length <= 5">
                            <div v-for="(prompt, index) in hotPrompts" :key="index" class="prompt-item"
                                @click="handlePromptClick(prompt)">
                                <span class="rank">{{ index + 1 }}</span>
                                <span class="content">{{ prompt }}</span>
                            </div>
                        </template>
                        <template v-else>
                            <div v-for="(prompt, index) in showAllHotPrompts ? hotPrompts : hotPrompts.slice(0, 5)"
                                :key="index" class="prompt-item" @click="handlePromptClick(prompt)">
                                <span class="rank">{{ index + 1 }}</span>
                                <span class="content">{{ prompt }}</span>
                            </div>
                            <div v-if="!showAllHotPrompts" class="view-more" @click="showAllHotPrompts = true">
                                查看更多
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部常用提示词 -->
        <div class="bottom-prompts">
            <div class="prompt-section">
                <div class="section-title">常用提示词</div>
                <div class="prompt-tags">
                    <el-tag v-for="(tag, index) in commonPrompts" :key="index" class="prompt-tag"
                        @click="handlePromptClick(tag)">
                        {{ tag }}
                    </el-tag>
                </div>
            </div>
        </div>
        <!-- 底部弹出菜单 -->
        <el-drawer v-model="showSubjectMenu" direction="btt" :size="drawerSize" :with-header="false" :z-index="9999">
            <div class="drawer-content">
                <div class="drawer-header">
                    <span>选择科目</span>
                    <el-icon class="close-icon" @click="showSubjectMenu = false">
                        <Close />
                    </el-icon>
                </div>
                <div class="drawer-list" ref="subjectList">
                    <div v-for="subject in subjects" :key="subject.value" class="drawer-item"
                        :class="{ active: currentSubject === subject.label }" @click="handleSubjectSelect(subject)">
                        {{ subject.label }}
                    </div>
                </div>
            </div>
        </el-drawer>
        <!-- 章节选择 -->
        <el-drawer v-model="showChapterMenu" direction="btt" :size="drawerSize" :with-header="false" :z-index="9999">
            <div class="drawer-content">
                <div class="drawer-header">
                    <span>选择章节</span>
                    <el-icon class="close-icon" @click="showChapterMenu = false">
                        <Close />
                    </el-icon>
                </div>
                <div class="drawer-list" ref="chapterList">
                    <div v-for="chapter in chapters" :key="chapter.value" class="drawer-item"
                        :class="{ active: currentChapter === chapter.label }" @click="handleChapterSelect(chapter)">
                        {{ chapter.label }}
                    </div>
                </div>
            </div>
        </el-drawer>
        <!-- 输入框 -->
        <div class="chat-input">
            <div class="input-wrapper">
                <el-button class="voice-button" @click="toggleVoiceInput">
                    <el-icon>
                        <Microphone v-if="!isVoiceInput" />
                        <ChatLineRound v-else />
                    </el-icon>
                </el-button>
                <div class="input-center">
                    <el-input v-if="!isVoiceInput" v-model="inputMessage" type="textarea" :rows="1"
                        placeholder="请输入您的问题..." @keyup.enter.exact.prevent="handleSendMessage" resize="none"
                        :autosize="{ minRows: 1, maxRows: 4 }" />
                    <div v-else class="voice-input" @touchstart="startRecording" @touchend="stopRecording">
                        <el-icon>
                            <Microphone />
                        </el-icon>
                        <span>按住说话</span>
                    </div>
                </div>
                <el-button class="send-button" @click="handleSendButtonClick" :disabled="!inputMessage.trim()">
                    <el-icon>
                        <Position />
                    </el-icon>
                </el-button>
                <el-button class="menu-button" @click.stop="toggleMenu">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-button>
            </div>
            <!-- 更多菜单 -->
            <div class="more-menu" v-show="showMenu" ref="moreMenuRef">
                <div v-if="!showHotPrompts" class="menu-grid">
                    <div class="menu-item" @click.stop="handleMenuClick('hotPrompts')">
                        <el-icon>
                            <Star />
                        </el-icon>
                        <span>热门提示词</span>
                    </div>
                    <div class="menu-item" @click="handleMenuClick('image')">
                        <el-icon>
                            <Picture />
                        </el-icon>
                        <span>图片</span>
                    </div>
                    <div class="menu-item" @click="handleMenuClick('camera')">
                        <el-icon>
                            <Camera />
                        </el-icon>
                        <span>拍照</span>
                    </div>
                    <div class="menu-item" @click="handleMenuClick('file')">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>文件</span>
                    </div>
                    <div class="menu-item" @click="handleMenuClick('location')">
                        <el-icon>
                            <Location />
                        </el-icon>
                        <span>位置</span>
                    </div>
                </div>
                <template v-else>
                    <div class="hot-prompts-content">
                        <div class="hot-prompts-header">
                            <span>热门提示词</span>
                            <el-icon class="close-icon" @click.stop="showHotPrompts = false">
                                <Close />
                            </el-icon>
                        </div>
                        <div class="hot-prompts-list">
                            <div v-for="(prompt, index) in hotPrompts" :key="index" class="hot-prompt-item"
                                @click.stop="handlePromptClick(prompt)">
                                <span class="prompt-number">{{ index + 1 }}</span>
                                <span class="prompt-text">{{ prompt }}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
import {
    Microphone,
    Plus,
    Picture,
    Camera,
    Document,
    Location,
    ChatLineRound,
    Close,
    Star,
    Position
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const currentSubject = ref('')
const currentChapter = ref('')
const currentCourse = ref('')
const showSubjectMenu = ref(false)
const showChapterMenu = ref(false)
const inputMessage = ref('')
const messages = ref([])
const isLoading = ref(false)
const chatContent = ref(null)
const userAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const aiAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const isVoiceInput = ref(false)
const showMenu = ref(false)
const isRecording = ref(false)
const drawerSize = ref('50%')
const subjectList = ref(null)
const chapterList = ref(null)
const moreMenuRef = ref(null)
const showAllHotPrompts = ref(false)
const showHotPrompts = ref(false)

// 模拟数据
const subjects = [
    { label: '语文', value: 'chinese' },
    { label: '数学', value: 'math' },
    { label: '英语', value: 'english' },
    { label: '物理', value: 'physics' },
    { label: '化学', value: 'chemistry' },
    { label: '生物', value: 'biology' },
    { label: '历史', value: 'history' },
    { label: '地理', value: 'geography' },
    { label: '政治', value: 'politics' }
]

const chapters = ref([])

const handleSubjectSelect = (subject) => {
    currentSubject.value = subject.label
    currentChapter.value = '' // 清空已选章节
    showSubjectMenu.value = false

    // 根据选择的科目加载对应的章节
    chapters.value = [
        { label: `第一章`, value: 'chapter1' },
        { label: `第二章`, value: 'chapter2' },
        { label: `第三章`, value: 'chapter3' },
        { label: `第四章`, value: 'chapter4' },
        { label: `第五章`, value: 'chapter5' },
        { label: `第六章`, value: 'chapter6' },
        { label: `第七章`, value: 'chapter7' },
        { label: `第八章`, value: 'chapter8' },
        { label: `第一百零一章`, value: 'chapter9' }
    ]
}

const formatChapterDisplay = (chapter) => {
    if (!chapter) return '章节'
    if (chapter.length <= 3) return chapter
    return chapter.slice(0, 3) + '...'
}

const handleChapterSelect = (chapter) => {
    currentChapter.value = chapter.label
    showChapterMenu.value = false
    // 这里可以添加选择章节后的其他逻辑
}

const scrollToBottom = async () => {
    await nextTick()
    if (chatContent.value) {
        chatContent.value.scrollTop = chatContent.value.scrollHeight
    }
}

const handleSendMessage = async () => {
    if (!inputMessage.value.trim()) {
        ElMessage.warning('请输入内容')
        return
    }

    // 添加用户消息
    messages.value.push({
        type: 'user',
        content: inputMessage.value
    })

    const userMessage = inputMessage.value
    inputMessage.value = ''
    isLoading.value = true

    try {
        // 模拟AI响应
        await new Promise(resolve => setTimeout(resolve, 1000))

        // 添加AI消息
        messages.value.push({
            type: 'ai',
            content: `这是AI的回复：${userMessage}`
        })
    } catch (error) {
        ElMessage.error('发送失败，请重试')
    } finally {
        isLoading.value = false
        scrollToBottom()
    }
}

const toggleVoiceInput = () => {
    isVoiceInput.value = !isVoiceInput.value
    if (!isVoiceInput.value) {
        showMenu.value = false
        inputMessage.value = '' // 切换回键盘模式时清空输入
    }
}

const toggleMenu = () => {
    showMenu.value = !showMenu.value
    if (showMenu.value) {
        isVoiceInput.value = false
    }
}

const startRecording = () => {
    isRecording.value = true
    ElMessage.info('开始录音...')
    // 这里添加实际的录音逻辑
}

const stopRecording = () => {
    isRecording.value = false
    ElMessage.success('录音结束')
    // 模拟录音文件处理
    const audioMessage = "这是一段录音内容" // 这里应该是实际的录音内容
    inputMessage.value = audioMessage
    nextTick(() => {
        handleSendMessage()
    })
}

const handleMenuClick = (type) => {
    if (type === 'hotPrompts') {
        showHotPrompts.value = true
    } else {
        showHotPrompts.value = false
        ElMessage.info(`选择${type}`)
    }
}

// 计算抽屉高度
const calculateDrawerSize = (listRef) => {
    if (!listRef.value) return
    const itemHeight = 44 // 每个选项的高度（包含padding和margin）
    const headerHeight = 52 // 头部高度（包含padding和border）
    const totalHeight = itemHeight * (listRef.value.children.length) + headerHeight
    const viewportHeight = window.innerHeight
    const maxHeight = viewportHeight * 0.5 // 最大高度为视口高度的50%

    // 如果内容高度小于最大高度，则使用内容高度
    if (totalHeight < maxHeight) {
        drawerSize.value = `${(totalHeight / viewportHeight) * 100}%`
    } else {
        drawerSize.value = '50%'
    }
}

// 监听抽屉显示状态
watch([showSubjectMenu, showChapterMenu], ([newSubjectMenu, newChapterMenu]) => {
    if (newSubjectMenu || newChapterMenu) {
        nextTick(() => {
            if (newSubjectMenu) {
                calculateDrawerSize(subjectList)
            }
            if (newChapterMenu) {
                calculateDrawerSize(chapterList)
            }
        })
    }
})

// 监听窗口大小变化
onMounted(() => {
    checkMorePrompts()
    window.addEventListener('resize', () => {
        if (showSubjectMenu.value) {
            calculateDrawerSize(subjectList)
        }
        if (showChapterMenu.value) {
            calculateDrawerSize(chapterList)
        }
    })
    document.addEventListener('click', handleClickOutside)
})

onMounted(() => {
    // 添加一条欢迎消息
    messages.value.push({
        type: 'ai',
        content: '你好！我是你的AI助手，有什么我可以帮你的吗？'
    })
})

onUnmounted(() => {
    window.removeEventListener('resize', checkMorePrompts)
    document.removeEventListener('click', handleClickOutside)
})

// 提示词相关
const showPromptTemplate = ref(true)
const showAllCommonPrompts = ref(false)
const hasMorePrompts = ref(false)
const promptTagsRef = ref(null)

// 检查是否需要显示"查看更多"
const checkMorePrompts = () => {
    if (promptTagsRef.value) {
        const tagsHeight = promptTagsRef.value.scrollHeight
        const containerHeight = promptTagsRef.value.clientHeight
        hasMorePrompts.value = tagsHeight > containerHeight
    }
}

const hotPrompts = ref([
    '帮我总结一下这篇文章的主要内容',
    '解释一下这个数学概念',
    '帮我分析这个历史事件的影响',
    '这个物理公式怎么推导的',
    '帮我写一篇作文',
    '这个物理公式怎么推导的',
    '帮我写一篇作文',
    '这个物理公式怎么推导的',
    '帮我写一篇作文',
    '这个物理公式怎么推导的',
    '帮我写一篇作文',
    '这个物理公式怎么推导的'
])

const commonPrompts = ref([
    '总结文章要点',
    '总结要点',
    '总结',
    '总结文章',
    '总结文点',
    '写出建议',
    '总结建议',
    '复习课程重点'
])

const handlePromptClick = (prompt) => {
    showMenu.value = false
    showHotPrompts.value = false
    inputMessage.value = prompt
    nextTick(() => {
        handleSendMessage()
    })
}

// 修改handleClickOutside函数
const handleClickOutside = (event) => {
    if (moreMenuRef.value && !moreMenuRef.value.contains(event.target)) {
        showMenu.value = false
        showHotPrompts.value = false
    }
}

// 添加发送按钮
const handleSendButtonClick = () => {
    handleSendMessage()
}
</script>

<style scoped>
.chat-container {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.course-selector {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    z-index: 9999;
    margin-top: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selector-left {
    display: flex;
    gap: 8px;
}

.selector-button {
    padding: 6px 16px;
    font-size: 14px;
    border: 1px solid #e4e7ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #606266;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 120px;
    overflow: hidden;
}

.selector-button:hover {
    border-color: #409eff;
    color: #409eff;
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.selector-button:disabled {
    color: #c0c4cc;
    border-color: #e4e7ed;
    background-color: #f5f7fa;
    cursor: not-allowed;
}

.selector-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #606266;
    transition: all 0.3s;
}

.selector-button:hover::after {
    border-top-color: #409eff;
}

.selector-button:disabled::after {
    border-top-color: #c0c4cc;
}

.selector-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-center {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.message-item {
    display: flex;
    margin-bottom: 16px;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message {
    flex-direction: row-reverse;
}

.message-avatar {
    flex-shrink: 0;
}

.message-content {
    max-width: 85%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 12px 16px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.user-message .message-content {
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    color: white;
}

.user-message .message-text {
    color: white;
}

.chat-input {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-top: 1px solid #e8e8e8;
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 8px 12px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 24px;
    padding: 4px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.input-center {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 88px);
    display: flex;
    align-items: center;
}

.voice-button,
.menu-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: none;
    color: #409eff;
    transition: all 0.3s;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.voice-button:hover,
.menu-button:hover {
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.voice-button :deep(.el-icon),
.menu-button :deep(.el-icon) {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-input {
    height: 36px;
    width: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.voice-input:active {
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.voice-input .el-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-input span {
    font-weight: 500;
}

.input-center :deep(.el-textarea__inner) {
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    background-color: white;
    border: none;
    transition: all 0.3s;
    width: 100%;
}

.input-center :deep(.el-textarea__inner:focus) {
    box-shadow: none;
}

.send-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    border: none;
    color: white;
    transition: all 0.3s;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.send-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.send-button:disabled {
    background: linear-gradient(135deg, #c0c4cc 0%, #a8abb2 100%);
    cursor: not-allowed;
    box-shadow: none;
}

.send-button :deep(.el-icon) {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .send-button {
        width: 32px;
        height: 32px;
    }

    .send-button :deep(.el-icon) {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
}

.more-menu {
    margin-top: 8px;
    padding: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    max-height: 40vh;
}

.menu-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 8px;
    border-radius: 12px;
}

.menu-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
}

.menu-item .el-icon {
    font-size: 24px;
    color: #409eff;
}

.menu-item span {
    font-size: 12px;
    color: #606266;
}

/* 确保下拉菜单显示在最上层 */
:deep(.el-dropdown-menu) {
    z-index: 99999 !important;
    margin-top: 8px !important;
}

:deep(.el-popper) {
    z-index: 99999 !important;
}

:deep(.el-popper__arrow) {
    display: none;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .chat-container {
        height: 100vh;
        height: 100dvh;
    }

    .course-selector {
        padding: 8px 12px;
    }

    .selector-button {
        padding: 4px 8px;
        font-size: 13px;
    }

    .selector-center {
        font-size: 15px;
    }

    .message-content {
        max-width: 90%;
    }

    .input-wrapper {
        max-width: 100%;
    }

    .input-center {
        max-width: calc(100% - 80px);
    }

    .voice-button :deep(.el-icon),
    .menu-button :deep(.el-icon) {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .voice-input {
        height: 32px;
        font-size: 13px;
        padding: 0 12px;
    }

    .voice-input .el-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    .input-center :deep(.el-textarea__inner) {
        font-size: 14px;
        padding: 6px 12px;
    }

    .menu-grid {
        gap: 12px;
    }

    .menu-item .el-icon {
        font-size: 20px;
    }

    .menu-item span {
        font-size: 11px;
    }
}

/* iOS 安全区域适配 */
@supports (padding: max(0px)) {
    .chat-container {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* 抽屉样式 */
:deep(.el-drawer) {
    border-radius: 16px 16px 0 0;
    z-index: 9999 !important;
}

:deep(.el-drawer__header) {
    display: none;
}

:deep(.el-drawer__body) {
    padding: 0;
    height: 100%;
}

:deep(.el-drawer__container) {
    z-index: 9999 !important;
}

:deep(.el-overlay) {
    z-index: 9998 !important;
}

:deep(.el-drawer__wrapper) {
    z-index: 9999 !important;
}

.drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    z-index: 9999;
}

.drawer-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.drawer-header span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    flex: 1;
    text-align: center;
    margin-right: 32px;
    /* 为关闭按钮预留空间，保持标题居中 */
}

.close-icon {
    font-size: 20px;
    cursor: pointer;
    color: #909399;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s;
    position: absolute;
    right: 16px;
}

.drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.drawer-item {
    padding: 12px 16px;
    font-size: 15px;
    color: #606266;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s;
    margin-bottom: 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.drawer-item:hover {
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.drawer-item.active {
    color: #409eff;
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .drawer-header {
        padding: 12px 16px;
    }

    .drawer-header span {
        font-size: 15px;
        margin-right: 28px;
    }

    .drawer-list {
        padding: 12px;
    }

    .drawer-item {
        padding: 10px 14px;
        font-size: 14px;
        height: 40px;
    }
}

/* 提示词模板样式 */
.prompt-template {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: linear-gradient(135deg, #f0f2f5 0%, #f8f9fa 100%);
    display: flex;
    flex-direction: column;
}

.prompts-container {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prompt-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
}

.prompt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.prompt-item:hover {
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.prompt-item .rank {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.prompt-item .content {
    font-size: 14px;
    color: #606266;
}

.prompt-tags {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prompt-tags::-webkit-scrollbar {
    display: none;
}

.prompt-tag {
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    color: #409eff;
    border: 1px solid #d9ecff;
    flex-shrink: 0;
}

.prompt-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    color: white;
    border-color: transparent;
}

.view-more {
    text-align: center;
    color: #409eff;
    font-size: 14px;
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.3s;
    background: none !important;
    border: none !important;
    margin-top: 8px;
    box-shadow: none !important;
}

.view-more:hover {
    color: #3a8ee6;
    background: none !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.view-more-item {
    background: none !important;
    border: none !important;
    cursor: pointer;
}

.view-more-item:hover {
    background: none !important;
}

.view-more-item .rank {
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
}

.view-more-item .content {
    color: #409eff;
}

.view-more-item:hover .content {
    color: #3a8ee6;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .prompt-template {
        padding: 12px;
    }

    .prompt-section {
        padding: 12px;
    }

    .section-title {
        font-size: 15px;
    }

    .prompt-item {
        padding: 10px;
    }

    .prompt-item .rank {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .prompt-item .content {
        font-size: 13px;
    }
}

/* 热门提示词内容样式 */
.hot-prompts-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    max-height: 40vh;
}

.hot-prompts-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    flex-shrink: 0;
}

.hot-prompts-header span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.hot-prompts-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    max-height: calc(40vh - 52px);
    /* 减去header的高度 */
}

.hot-prompt-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.hot-prompt-item:hover {
    background: linear-gradient(135deg, #ecf5ff 0%, #ffffff 100%);
    transform: translateX(4px);
}

.prompt-number {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    margin-right: 12px;
    flex-shrink: 0;
}

.prompt-text {
    font-size: 14px;
    color: #606266;
    flex: 1;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .hot-prompts-content {
        margin-top: 12px;
    }

    .hot-prompts-header {
        padding: 10px 14px;
    }

    .hot-prompts-header span {
        font-size: 14px;
    }

    .hot-prompt-item {
        padding: 10px;
    }

    .prompt-number {
        width: 20px;
        height: 20px;
        font-size: 11px;
        margin-right: 10px;
    }

    .prompt-text {
        font-size: 13px;
    }
}

.bottom-prompts {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #f0f2f5;
    padding: 16px;
    margin-top: auto;
    /* border-top: 1px solid #e8e8e8; */
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .bottom-prompts {
        padding: 12px;
    }
}
</style>